
<!DOCTYPE html>
<html>
  <head>
    <title>DEMO</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="format-detection" content="telephone=no" />
	<link href="../../css/style.css" rel="stylesheet" type="text/css" />
	<style>
			.win-login{ padding:40px; }
			.win-login .inp {  padding: 6px 0; padding-top:10px;	 }
			.win-login .inp .icon{ width:30px; height:30px;background:url() no-repeat center; background-size:80%; }
			.win-login .inp input{ border:0; outline:none; background-color:transparent;  }
			.win-login .inp .icon-phone{ background-image:url(../../image/ic_tip_mobile.png); }
			.win-login .inp .icon-password{ background-image:url(../../image/ic_tip_pwd.png); }
			.win-login .link { padding:16px 0; color:#999; }
			.win-login .link .rt{ float:right; }
			.win-login .link .hover{  }
			.win-login .sub { padding:40px 0; }
			.win-login .sub span{ color:#fe3232; border:1px solid #fe3232; display:block; text-align:center; padding:8px 0; border-radius:4px; width:80%; margin:0 auto; }
			.win-login .sub span.disabled{ background-color: #ddd; color: #eee; border-color: #ddd;  }
			.login-frm .sub span:before{ content: '登陆' }
			.login-frm .sub span.disabled:before{ content: '稍后…' }
			.reg-frm .sub span:before{ content: '注册' }
			.reg-frm .sub span.disabled:before{ content: '稍后…' }
			
			
			.personl .bg{max-height: 220px; overflow: hidden; }
			.personl .bg img{ width:100%; }
			.personl .title{       display: -webkit-box;    display: -webkit-flex;    display: flex; margin: 0 10px; margin-top: -31px;  }
			.personl .title .txt{     -webkit-box-flex: 1;     -webkit-flex: 1;    flex: 1; color:white;  padding-left:10px; }
			.personl .title .txt h6{ padding: 6px 0; }
			.personl .title .txt h6 span{ display: inline-block; border-radius: 50px; border: 1px solid #ddd; color:#777; float: right; background: url(../../image/profile_action_set_icon.png) no-repeat 10px center; background-size:16px; padding: 4px 10px; padding-left: 30px;  }
			.personl .title .pic{ width: 60px; height: 60px; overflow: hidden; border-radius: 6px; border:1px solid #eee; }
			.personl .title .pic img{ width:100%; min-height: 100%; }
			.personl .con{ padding: 10px; color: #333; line-height: 22px; position: relative;  }
			.personl .con .link span{ color:#3b99da; }
			.personl .con:after{     content: '';     position: absolute;     left: 0; bottom:0px;    background: #ddd;     width: 100%;     height: 1px;     -webkit-transform: scaleY(0.5);             transform: scaleY(0.5);     -webkit-transform-origin: 0 0;             transform-origin: 0 0; }
			.more{ text-align:center; color:#aaa; line-height:42px; }
				
			body.black .win-login .inp input{ color: #707070; }
			body.black .win-login .link{ color: #707070; }
			body.black .win-login .sub span{ color: #935656; border-color: #935656; }
			body.black .personl .con{ color: #777; }
			body.black .personl .con:after{  background-color:#363636; }
			body.black .personl .con .link span{  color:#67778b; }
			body.black .personl .title .txt h6 span{ background-color: #444; border-color: #444; }
	</style>
  </head>
  <body>
		<div class="win-login none login-frm">
			<div class="inp border-b flex-wrap">
				<div class="icon icon-phone"></div>
				<input id="lo-phone" class="flex-con"  type="number" placeholder="请输入手机号码" />
			</div>
			<div class="inp border-b flex-wrap">
				<div class="icon icon-password"></div>
				<input id="lo-password" class="flex-con" type="password" placeholder="请输入密码" />
			</div>
			<div class="link">
				<span tapmode="hover" class="rt" >忘记密码</span>
				<span tapmode="hover" onclick="funOpenHeader( this );"  data-name="reg-frm" >注册账号</span>
			</div>
			<div class="sub">
				<span onclick="funLog( this );" ></span>
			</div>
		</div>
		
		
		<div class="win-login none reg-frm">
			<div class="inp border-b flex-wrap">
				<div class="icon icon-phone"></div>
				<input id="re-phone" class="flex-con" type="number" placeholder="请输入手机号码" />
			</div>
			<div class="inp border-b flex-wrap">
				<div class="icon icon-password"></div>
				<input id="re-password" class="flex-con" type="password" placeholder="请输入密码" />
			</div>
			<div class="inp border-b flex-wrap">
				<div class="icon icon-password"></div>
				<input id="re-doPassword" class="flex-con" type="password" placeholder="确认密码" />
			</div>
			<div class="sub">
				<span tapmode="hover" onclick="funReg( this );" ></span>
			</div>
		</div>
		
		
		  <div class="personl none personl-frm">
			  <div class="bg">
				  <img src="../../image/Untitled-1.jpg" />
			  </div>
			  <div class="title">
				  <!--
					<div class="pic">
					  <img src="../../image/b58f8c5494eef01fbf0123cde2fe9925bc317da4.jpg" />
				  </div>
				  <div class="txt">
					  <h6>往右</h6>
					  <h6><span>设置</span></h6>
				  </div>  
				 -->
			  </div>
			  <div class="con">
				  <div class="link">
					  <span>订阅</span>
					   0 | 
					   <span>关注</span>
					   0 |
					   <span>粉丝</span>
					   0
				  </div>
				  刚开始你的旅途
			  </div>
			  <div class="more">点击加载更多</div>
		  </div>
  </body>
</html>
<script type="text/javascript" src="../../script/SHA1.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script>
	apiready = function(){
		$api.skin();
		$api.removeCls( $api.dom( '.'+api.winName ), 'none' );
		if( api.winName == 'personl-frm' ){
			funEachData( $api.getStorage( 'user' ) );
		}
	}
	
	
	function funEachData( ret ){
		if( typeof ret === 'string' ){
			ret = JSON.parse( ret );
		};
		var img = ret.img || '../../image/default.png';
		var ht = '	<div class="pic">'+
		'	  <img src="'+ img +'" />'+
		'  </div>'+
		'  <div class="txt">'+
		'	  <h6>'+ret.username+'</h6>'+
		'	  <h6><span tapmode="hover" onclicK="$api.empty();" >设置</span></h6>'+
		'  </div>'
		$api.append( $api.dom('.personl-frm .title'), ht );
	};
	
	function funOpenHeader( tag ){
		var name = tag.getAttribute('data-name');
		api.openWin({
			name:  name,
			url: '../public/header.html',
			pageParam:{
				file : 'login-reg'
			},
		});
	};
	
	function funLog( tag ){
		if( ! $api.hasCls( tag ,'disabled' ) ){
			var phone = $api.dom('#lo-phone');
			var password = $api.dom('#lo-password');
			if( !$api.val( phone ) ){
				$api.toast( '手机不能为空！' );
			}else if(  !$api.val( password )  ){
				$api.toast( '密码不能为空！' );
			}else{
				$api.addCls( tag, 'disabled' );
				setTimeout(function(){
					$api.removeCls( tag, 'disabled' );
				},5000);
				var bodyParam = {
					username: $api.val( phone ),
					password: $api.val( password )
				}
				$api.ajax('/user/login', 'post', bodyParam, function (ret, err) {
					if (ret) {
						$api.setStorage( 'accessToken' , ret.id );	
						$api.setStorage( 'isLogin' , true);		// 是否初始化首页频道
						$api.setStorage( 'isGro-article' , true);		// 当前在 ”我的“ 界面时初始化首页隐藏首页 Group 
						api.execScript({
						    name: 'root',
						    frameName: 'me-list',
						    script: 'funQueryUser( \''+ret.userId+'\' );'
						});
						api.closeWin();
					} else {
						$api.toast( err.msg );
					}
					$api.removeCls( tag, 'disabled' );
				});
			
			};
		};
	};
	
	
	function funReg( tag ){
		if( ! $api.hasCls( tag ,'disabled' ) ){
			var phone = $api.dom('#re-phone');
			var password = $api.dom('#re-password');
			var doPassword = $api.dom('#re-doPassword');
			if( !$api.val( phone ) ){
				$api.toast( '手机不能为空！' );
			}else if( ! /^1\d{10}$/.exec( $api.val( phone ) )  ){
				$api.toast( '手机格式有误！( 11位数字 )' );
			}else if(  !$api.val( password )  ){
				$api.toast( '密码不能为空！' );
			}else if(  !$api.val( doPassword )  ){
				$api.toast( '请确认密码' );
			}else if(  $api.val( password ) != $api.val( doPassword )  ){
				$api.toast( '确认密码不一致' );
			}else{
				$api.addCls( tag, 'disabled' );
				setTimeout(function(){
					$api.removeCls( tag, 'disabled' );
				},5000);
				var bodyParam = {
					username: $api.val( phone ),
					password: $api.val( password )
				}
				$api.ajax(	'/user/', 'post', bodyParam, function (ret, err) {
					if ( ret ) {
						api.execScript({
						    name: 'login-frm',
						    frameName: 'login-frm',
						    script: 'funPhoneIni( '+$api.val( phone )+' );'
						});
						api.closeWin();
					} else {
						$api.toast( err.msg );
					}
					$api.removeCls( tag, 'disabled' );
				});
			}
		}
	};
	
	function funPhoneIni( ht ){
		$api.dom('#lo-phone').value = ht;
	};
</script>